<template>
  <div
    v-loading="loading"
    element-loading-custom-class="loadingStyle"
    class="dashboard-container"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div id="top">
      <div class="wp clearfix">
        <div class="left pageTit"><a class="summaryBtn" @click="jumpsee()">进入患者列表</a></div>
        <div class="center topLogo">
          <a href="#">胸痛卒中快速响应信息平台</a>
          <!-- th:text="${hospitalName}+'胸痛卒中快速响应信息平台'" -->
        </div>
        <div class="right topBar">
          <div v-show="!!time" class="topTime">{{ time }}</div>
          <div class="clearfix">
            <!-- <a id="logout" class="signOut fr" @click="logout()">退出</a> -->
            <a href="javascript:;" class="signOut fr"><span v-text="$store.getters.name" /></a>
          </div>
        </div>
      </div>
    </div>
    <!--Top End!-->
    <!--Main Start!-->
    <div id="main" class="wp clearfix">
      <div class="left">
        <!--今日任务数量-->
        <div class="item waybill">
          <div class="itemTit">
            <span class="border-yellow-new">&nbsp;</span>
            <span class="itemTit_span">今日任务数量</span>
          </div>
          <div class="itembg">
            <div class="left_content_margin">
              <div class="progress process_margin_first" th:progress="map.apoplexyProgress">
                <h3 class="clearfix">
                  <span>卒中患者</span>
                  <i v-text="content.todayStrokeCount + '例'">0例</i>
                </h3>
                <!-- <div class="progressBar">
                    <span />
                  </div> -->
                <el-progress :percentage="content.apoplexyProgress" color="#32ffc7" />
                <!-- <el-progress :percentage="content.apoplexyProgress.replace("%",'')" color="#32ffc7" /> -->
                <!-- <h4>0%</h4> -->
              </div>
              <div class="progress process_margin_other" th:progress="map.cerebralProgress">
                <h3 class="clearfix">
                  <span>脑梗死</span>
                  <i v-text="content.cerebral + '例'">0例</i>
                </h3>
                <!-- <div class="progressBar">
                    <span />
                  </div> -->
                <el-progress :percentage="content.cerebralProgress" color="#32ffc7" />
              </div>
              <div class="progress process_margin_other" th:progress="map.acsProgress">
                <h3 class="clearfix">
                  <span>胸痛患者</span>
                  <i v-text="content.todayChestPainCount + '例'">0例</i>
                </h3>
                <!-- <div class="progressBar">
                    <span />
                  </div> -->
                <el-progress :percentage="content.acsProgress" color="#32ffc7" />
                <!-- <h4>0%</h4> -->
              </div>
              <div class="progress process_margin_other" th:progress="map.stemiProgress">
                <h3 class="clearfix">
                  <span>STEMI</span>
                  <i v-text="content.stemi + '例'">0例</i>
                </h3>
                <!-- <div class="progressBar">
                    <span />
                  </div> -->
                <el-progress :percentage="content.stemiProgress" color="#32ffc7" />
                <!-- <h4>0%</h4> -->
              </div>
              <div class="progress process_margin_last" th:progress="map.otherProgress">
                <h3 class="clearfix">
                  <span>其他心脑血管急症</span>
                  <i v-text="content.other + '例'">0例</i>
                </h3>
                <!-- <div class="progressBar">
                    <span />
                  </div>
                  <h4>0%</h4> -->
                <el-progress :percentage="content.otherProgress" color="#32ffc7" />
              </div>
            </div>
          </div>
        </div>

        <!--各阶段平均用时统计-->
        <div class="item">
          <div class="itemTit">
            <span class="border-blue-new">&nbsp;</span>
            <span class="itemTit_span">各阶段平均用时统计（周）</span>
          </div>
          <div class="left_content_margin">
            <ul class="listStyle">
              <li class="clearfix">
                <span>FMC-ECG</span>
                <span style="text-align: right;">
                  <strong v-text="content.ecg">0</strong>
                  分钟
                </span>
              </li>
              <li class="clearfix clearfix_margin">
                <span>FMC-CT（卒中）</span>
                <span style="text-align: right;">
                  <strong v-text="content.ct">0</strong>
                  分钟
                </span>
              </li>
              <li class="clearfix clearfix_margin">
                <span>S2FMC</span>
                <span style="text-align: right;">
                  <strong v-text="content.s2fmc">0</strong>
                  分钟
                </span>
              </li>
              <li class="clearfix clearfix_margin">
                <span>门球时间</span>
                <span style="text-align: right;">
                  <strong v-text="content.d2b">0</strong>
                  分钟
                </span>
              </li>
              <li class="clearfix clearfix_margin">
                <span>门药时间</span>
                <span style="text-align: right;">
                  <strong v-text="content.dnt">0</strong>
                  分钟
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="centerWp">
          <!--中间大地图-->
          <div class="mapContainer">
            <!-- <iframe src="https://www.baidu.com/" style="width:100%;height:100%;border:none;outline:none;"></iframe> -->
            <!-- <div class="btnLayer">
                <div class="search">
                  <div class="searchInner">
                    <a href="javascript:;" class="searchBtn"><span class="icoSearch"></span></a>
                    <form class="searchForm">
                      <button class="icoSearch"></button>
                      <input type="text" name="" placeholder="请搜索车辆">
                    </form>
                  </div>
                </div>
                <a href="javascript:;" class="infoBtn"><span class="icoCar"></span></a>
              </div> -->
            <div id="myMap" class="item" />
          </div>

          <!--月运任务量统计图-->
          <div class="billChart">
            <div class="itemTit">
              <span class="border-blue-new">&nbsp;</span>
              <span class="itemTit_span">
                月任务量统计图
                <small id="month">{{ month }}</small>
              </span>
            </div>
            <div id="myChart1" ref="myChart1" />
          </div>
        </div>
      </div>
      <!-- Right Start! -->
      <div class="right">
        <!--总计任务数-->
        <div class="item">
          <div class="itemTit">
            <span class="border-green-new">&nbsp;</span>
            <span class="itemTit_span">总计任务数量</span>
          </div>
          <div class="itembg">
            <div class="right_content_upper_margin" style="position: relative;color: #fff;">
              <div v-for="(item, index) in content.allTotalStr" :key="'allTotalStr' + item + index" class="number_square_div">
                <span class="number_square_span">{{ item }}</span>
              </div>
              <div style="display: inline-block;color: #fff;"><span style="font-size: 25px;position: relative; top: -6px;">例</span></div>
            </div>
          </div>
        </div>

        <!--基本信息-->
        <div class="item">
          <div class="itemTit">
            <span class="border-yellow-new">&nbsp;</span>
            <span class="itemTit_span">今日筛查总数量</span>
          </div>
          <div class="itembg">
            <div class="right_content_upper_margin">
              <span style="color: #fff;">网络医院</span>
              <span style="position: relative;color: #fff;float: right;right: 88px;">院内门诊</span>
              <div style="width: 100%;">
                <div style="display: inline-block;position: relative;top:3px;">
                  <div v-for="(item, index) in content.todayNetHospitalTriageCountStr" :key="'todayNetHospitalTriageCountStr' + item + index" class="number_square_div">
                    <span class="number_square_span" style="color: #2BD2A4" v-text="item" />
                  </div>
                  <!-- 									<div class="number_square_div"> -->
                  <!-- 										<span class="number_square_span" style="color: #FFD21D;">1</span> -->
                  <!-- 									</div> -->
                  <!-- 									<div class="number_square_div"> -->
                  <!-- 										<span class="number_square_span" style="color: #FFD21D;">1</span> -->
                  <!-- 									</div> -->
                  <div style="display: inline-block;color: #fff;"><span style="font-size: 25px;position: relative; top: -6px;">例</span></div>
                </div>
                <div style="display: inline-block;position: relative;float: right;top:3px;">
                  <div v-for="(item, index) in content.todayTriageCountStr" :key="'todayTriageCountStr' + item + index" class="number_square_div">
                    <span class="number_square_span" style="color: #2BD2A4" v-text="item" />
                  </div>
                  <!-- 									<div class="number_square_div"> -->
                  <!-- 										<span class="number_square_span" style="color: #2BD2A4">1</span> -->
                  <!-- 									</div> -->
                  <!-- 									<div class="number_square_div"> -->
                  <!-- 										<span class="number_square_span" style="color: #2BD2A4">1</span> -->
                  <!-- 									</div> -->
                  <div style="display: inline-block;color: #fff;"><span style="font-size: 25px;position: relative; top: -6px;">例</span></div>
                  s
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="itemTit">
            <span class="border-blue-new">&nbsp;</span>
            <span class="itemTit_span">随访总数量</span>
          </div>
          <div class="right_content_down_margin">
            <ul class="listStyle">
              <li class="clearfix">
                <span>
                  网络医院预计数量：
                  <strong v-text="content.referralChest">0</strong>
                  人
                </span>
                <span>
                  网络医院已完成数量：
                  <strong v-text="content.referralStrock">0</strong>
                  人
                </span>
                <span>
                  院内门诊预计数量：
                  <strong v-text="content.preAidChest">0</strong>
                  人
                </span>
                <span>
                  院内门诊已完成数量：
                  <strong v-text="content.preAidStrock">0</strong>
                  人
                </span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 				<div class="item basicInfo"> -->
        <!-- 					<div class="itemTit"> -->
        <!-- 						<span class="border-green">基本信息</span> -->
        <!-- 					</div> -->
        <!-- 					<div class="itemCon itembg"> -->
        <!-- 						<div class="infoPie"> -->
        <!-- 							<ul class="clearfix"> -->
        <!-- 								<li class="color-yellow"> -->
        <!-- 									<span class="border-yellow" id="indicator1">0</span> -->
        <!-- 									<p>筛查患者</p> -->
        <!-- 								</li> -->
        <!-- 								<li class="color-green"> -->
        <!-- 									<span class="border-green" id="indicator2" th:total="${map.greenType}">0</span> -->
        <!-- 									<p>绿道患者</p> -->
        <!-- 								</li> -->
        <!-- 								<li class="color-blue"> -->
        <!-- 									<span class="border-blue" id="indicator3" th:total="${map.followups}">0</span> -->
        <!-- 									<p>随访患者</p> -->
        <!-- 								</li> -->
        <!-- 							</ul> -->
        <!-- 							<div id="indicatorContainer"></div> -->
        <!-- 						</div> -->
        <!-- 					</div> -->
        <!-- 				</div> -->

        <!--人员信息-->
        <div class="item">
          <div class="itemTit">
            <span class="border-blue-new">&nbsp;</span>
            <span class="itemTit_span">来院方式统计</span>
          </div>
          <div class="itembg right_content_down_margin_2_bg">
            <div class="right_content_down_margin_2">
              <span class="lyfs_xt_label">胸痛</span>
              <span class="lyfs_cz_label">卒中</span>
              <div style="display: block;">
                <ul class="right_content_down_margin_2_ul">
                  <li>
                    <div style="width: 100%;">
                      <span>基层转诊：</span>
                      <div class="lyfs_jczz_xt_div">
                        <span style="color: #4381e9" v-text="content.referralChest" />
                        <span style="color: #fff" class="fr unitRen">人</span>
                      </div>
                      <div class="lyfs_jczz_cz_div">
                        <span style="color: #f75f61" v-text="content.referralStrock" />
                        <span style="color: #fff" class="fr unitRen">人</span>
                      </div>
                    </div>
                    <div style="width: 100%;">
                      <span>院前急救：</span>
                      <div class="lyfs_yqjj_xt_div">
                        <span style="color: #4381e9" v-text="content.preAidChest" />
                        <span style="color: #fff" class="fr unitRen">人</span>
                      </div>
                      <div class="lyfs_yqjj_cz_div">
                        <span style="color: #f75f61" v-text="content.preAidStrock" />
                        <span style="color: #fff" class="fr unitRen">人</span>
                      </div>
                    </div>
                    <div style="width: 100%;">
                      <span>自行来院：</span>
                      <div class="lyfs_zxly_xt_div">
                        <span style="color: #4381e9" v-text="content.oneselfChest" />
                        <span style="color: #fff" class="fr unitRen">人</span>
                      </div>
                      <div class="lyfs_zxly_cz_div">
                        <span style="color: #f75f61" v-text="content.oneselfStrock" />
                        <span style="color: #fff" class="fr unitRen">人</span>
                      </div>
                    </div>
                    <div style="width: 100%;">
                      <span>院内发病：</span>
                      <div class="lyfs_ynfb_xt_div">
                        <span style="color: #4381e9" v-text="content.inHospitalChest" />
                        <span style="color: #fff" class="fr unitRen">人</span>
                      </div>
                      <div class="lyfs_ynfb_cz_div">
                        <span style="color: #f75f61" v-text="content.inHospitalStrock" />
                        <span style="color: #fff" class="fr unitRen">人</span>
                      </div>
                    </div>
                    <!-- 								<span>院前急救：<strong th:text="${map.preAidChest}">6</strong>人</span><span>院前急救：<strong th:text="${map.preAidStrock}">15</strong>人</span> -->
                    <!-- 								<span>自行来院：<strong th:text="${map.oneselfChest}">20</strong>人</span><span>自行来院：<strong th:text="${map.oneselfStrock}">29</strong>人</span> -->
                    <!-- 								<span>院内发病：<strong th:text="${map.inHospitalChest}">3</strong>人</span><span>院内发病：<strong th:text="${map.inHospitalStrock}">10</strong>人</span> -->
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--任务状态-->
        <!-- 				<div class="item billState"> -->
        <!-- 					<div class="itemTit"> -->
        <!-- 						<span class="border-green">任务状态</span> -->
        <!-- 					</div> -->
        <!-- 					<div class="itemCon"> -->
        <!-- 						<div class="StateBox"> -->
        <!-- 							<div class="StateTit"> -->
        <!-- 								<span>任务编号</span> -->
        <!-- 								<span>创建时间</span> -->
        <!-- 								<span>完成情况</span> -->
        <!-- 							</div> -->
        <!-- 							<div id="FontScroll"> -->
        <!-- 								<ul> -->
        <!-- 									<li th:each="dispatches:${list}"> -->
        <!-- 										<div class="fontInner clearfix"> -->
        <!-- 											<span th:text="${dispatches.id}">ZC1712120023</span> -->
        <!-- 											<span th:text="${#dates.format(dispatches.createdAt, 'yyyy-MM-dd HH:mm')}">2小时15分</span> -->
        <!-- 											<span th:text="${dispatches.inprogress}==1?'急救中':'已转归'">已转归</span> -->
        <!-- 										</div> -->
        <!-- 									</li> -->
        <!-- 								</ul> -->
        <!-- 							</div> -->
        <!-- 						</div> -->
        <!-- 					</div> -->
        <!-- 				</div> -->
      </div>
      <!-- Right - End -->
    </div>
    <!--Main End!-->
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
// import adminDashboard from './admin'
// import editorDashboard from './editor'
// import './css/index.css';
import AMapLoader from '@amap/amap-jsapi-loader'
import imgUrl from '@/images/dashboard/hospital3.png'
import { getGlobalData } from '@/api/dashboard/dashboard.js'
import echarts from 'echarts'
export default {
  name: 'Dashboard',
  // components: { adminDashboard, editorDashboard },
  data() {
    return {
      webSocket: {},
      loading: true,
      hospitalLocation: [113.7462003571472, 27.63500179114635], // 医院位置
      time: '',
      month: '',
      Timer: null,
      content: {
        apoplexyProgress: 0,
        cerebralProgress: 0,
        acsProgress: 0,
        stemiProgress: 0,
        otherProgress: 0,
        // hospitalLocations: [0, 0], // 医院位置
        allTotalStr: [], // 总计任务数量(右上)
        todayNetHospitalTriageCountStr: [], // 今日筛查总数量-网络医院(右中)
        todayTriageCountStr: [], // 今日筛查总数量-院内门诊(右中)
        referralChest: '', // 网络医院预计数量(右中)// 基层转诊-胸痛(右中)
        referralStrock: '', // 网络医院已完成数量(右中)// 基层转诊-卒中(右中)
        preAidChest: '', // 院内门诊预计数量(右中) // 院前急救-胸痛(右中)
        preAidStrock: '', // 院内门诊已完成数量(右中) // 院前急救-卒中(右中)
        oneselfChest: '', // 自行来院-胸痛(右中)
        oneselfStrock: '', // 自行来院-卒中(右中)
        inHospitalChest: '', // 院内发病-胸痛(右中)
        inHospitalStrock: '', // 院内发病-卒中(右中)
        ecg: '', // FMC-ECG
        ct: '', // FMC-CT（卒中
        s2fmc: '', // S2FMC
        d2b: '', // 门球时间
        dnt: '', // 门药时间
        todayStrokeCount: '', // 卒中患者
        cerebral: '', // 脑梗死
        todayChestPainCount: '', // 胸痛患者
        stemi: '', // STEMI
        other: '' // 其他心脑血管急症
      }
    }
  },
  computed: {},
  created() {
    this.queryGlobalData()
    this.timeCount()
  },
  destroyed() {
    this.webSocket.close()
    console.log('首页webSocket关闭')
  },
  beforeDestroy() {
    clearInterval(this.Timer)
    this.Timer = null
  },
  methods: {
    /*
     *全局数据初始化
     */
    queryGlobalData() {
      const params = {
        hospitalId: this.$store.getters.hospitalId,
        apiToken: this.$store.getters.apiToken
      }
      try {
        getGlobalData(params).then(res => {
          this.dataMount(res)
        }).catch(e => {
          console.log('err', e)
        })
      } catch (e) {
        console.log('err', e)
        // TODO handle the exception
      }

      this.SocketMount()
    },
    dataMount(res, socket) {
      if (!res) {
        console.log('初始化查询失败-', res)
        return false
      }
      res = JSON.parse(JSON.stringify(res).replace(' ', '　'))
      Object.keys(res).forEach(index => {
        if (this.content[index] !== undefined) {
          this.content[index] = res[index]
        }
      })
      if (res.hospitalLocations) {
        const hospital_location_info = JSON.parse(res.hospitalLocations)
        if (hospital_location_info.code && hospital_location_info.code === 200) {
          this.hospitalLocation = hospital_location_info.data.point
        }
      }
      // console.log(this.hospitalLocation)
      this.mapCreat(socket) // 获取到医院位置后创建地图
      this.loading = false
      this.echartCreat(res)
    },
    SocketMount() {
      const url = process.env.VUE_APP_ENV_ADDRESS?process.env.VUE_APP_ENV_ADDRESS.replace('http', 'ws') + ':12121':""
      // const url = process.env.VUE_APP_ENV_ADDRESS.replace('http', 'ws')
      // const socketUrl = `${url}/websocket/${this.$store.getters.userId}:12334`
      const socketUrl = `${url}/websocket/${this.$store.getters.userId}`
      // const socketUrl = 'ws://192.168.2.120:12121/websocket/' + this.$store.getters.userId
      // console.log('首页通知socketUrl', socketUrl)
      this.webSocket = new WebSocket(socketUrl)
      /* 建立连接*/
      this.webSocket.onopen = (evt) => {
        console.log('首页通知webSocket连接成功')
        this.webSocket.send(`screenRefresh|${this.$store.getters.apiToken}|${this.$store.getters.hospitalId}|`)
      }
      // "screenRefresh|432c737055aa76f7df4d11eb4d6ac229|17|");
      /* 连接关闭*/
      this.webSocket.onclose = (evt) => {
        console.log('首页通知webSocket连接关闭')
      }
      /* 接收服务器推送消息*/
      this.webSocket.onmessage = (data) => {
        // console.log('首页通知webSocket接受消息', data)
        // console.log('当前时间', this.time)
        // return false
        var content = null
        if (data && data.data && JSON.parse(data.data)) {
          content = JSON.parse(data.data).content
        }
        if (!content) {
          console.log('首页信息接收错误')
          return false
        }
        // console.log('当前时间', this.time)
        this.dataMount(content, true)
      }
      /* 连接发生错误时*/
      this.webSocket.onerror = (evt, e) => {
        console.log('首页通知webSocket连接错误')
        console.log(evt)
        this.webSocket.open()
      }
      // webSocket.close()
    },

    /*
     *跳转至首页
     */
    jumpsee(row) {
      const page = this.$store.getters.routerPowers.find(item => item.meta.title === '绿色通道') ||
      this.$store.getters.routerPowers.find(item => item.meta.title !== '实时监控')
      if (page) {
        this.$router.push({ path: page.redirect || page.path })
      } else {
        this.$message.warning('当前用户无其他页面权限')
      }
    },
    /*
     *echart图组件初始化
     */
    echartCreat(res) {
      const option1 = {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            var res = '本月' + params.name + '号<br/>' + params.seriesName + '：' + params.data + '人'
            return res
          }
        },
        legend: {
          data: ['卒中', '胸痛'],
          x: 'right',
          y: 'top',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '15%',
          left: '0%',
          right: '2%',
          bottom: '0%',
          // width: '85%',
          // height: '65%'
          containLabel: true
        },
        xAxis: {
          data: res.days,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: '12px',
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 1
            }
          }
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: '12px',
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 1
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '卒中',
            type: 'bar',
            barWidth: 10,
            data: res.strockCount,
            itemStyle: {
              normal: {
                barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#f75f61' }, { offset: 1, color: '#f75f61' }])
              }
            }
          },
          {
            //                	barBorderRadius:[10, 10, 10, 10],
            name: '胸痛',
            type: 'bar',
            barWidth: 10,
            data: res.chestCount,
            itemStyle: {
              normal: {
                barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#4381e9' }, { offset: 1, color: '#4381e9' }])
              }
            }
          }
        ]
      }

      const chart = this.$refs.myChart1
      if (chart) {
        const myChart = echarts.init(chart)
        myChart.setOption(option1)
      }
    },

    // 顶部时间
    getTime() {
      const myDate = new Date()
      const myYear = myDate.getFullYear() // 获取完整的年份(4位,1970-????)
      const myMonth = myDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
      const myToday = myDate.getDate() // 获取当前日(1-31)
      const myDay = myDate.getDay() // 获取当前星期X(0-6,0代表星期天)
      const myHour = myDate.getHours() // 获取当前小时数(0-23)
      const myMinute = myDate.getMinutes() // 获取当前分钟数(0-59)
      const mySecond = myDate.getSeconds() // 获取当前秒数(0-59)
      const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const nowTime =
        myYear +
        '-' +
        this.fillZero(myMonth) +
        '-' +
        this.fillZero(myToday) +
        '  ' +
        week[myDay] +
        '  ' +
        this.fillZero(myHour) +
        ':' +
        this.fillZero(myMinute) +
        ':' +
        this.fillZero(mySecond)
      this.time = nowTime
      this.month = '(' + myYear + '年' + this.fillZero(myMonth) + '月)'
    },
    fillZero(str) {
      let realNum
      if (str < 10) {
        realNum = '0' + str
      } else {
        realNum = str
      }
      return realNum
    },
    /*
     *定时刷新时间
     */
    timeCount() {
      this.Timer = setInterval(this.getTime, 1000)
    },
    /*
   *地图组件初始化
   */
    mapCreat(socket) {
      if (socket) {
        return
      }
      AMapLoader.load({
        key: 'a813133c4ebd18435c118f544fd30ee0', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
        // 是否加载 AMapUI，缺省不加载
          version: '1.1', // AMapUI 缺省 1.1
          plugins: [] // 需要加载的 AMapUI ui插件
        },
        Loca: {
        // 是否加载 Loca， 缺省不加载
          version: '1.3.2' // Loca 版本，缺省 1.3.2
        }
      }).then(AMap => {
      // let map = new AMap.Map('myMap');
        const map = new AMap.Map('myMap', {
          resizeEnable: true,
          zoom: 16,
          mapStyle: 'amap://styles/darkblue',
          center: this.hospitalLocation
        // viewMode:'3D'//使用3D视图
        })
        // 创建 AMap.Icon 实例：
        const icon = new AMap.Icon({
          size: new AMap.Size(50, 52), // 图标尺寸
          image: imgUrl, // Icon的图像
          // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(50, 52) // 根据所设置的大小拉伸或压缩图片
        })
        // 将 Icon 实例添加到 marker 上:
        const marker = new AMap.Marker({
          position: this.hospitalLocation, // 位置
          // offset: new AMap.Pixel(-10, -10),
          icon: icon // 添加 Icon 实例
        // title: '本院',
        // zoom: 13
        })
        map.add(marker) // 添加到地图
      })
    // .catch(e => {
    //     console.log(e);
    // })
    },
    /*
   *系统退出
   */
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      window.webSocket.close()
    }
  }
}
</script>
<style src="./css/index.css" scoped></style>
<style lang="scss" scoped>
@import '~@/views/dashboard/css/cover.scss';
</style>
